<template>
  <div class="broadcast-room">
    <c-title text="抖音精选"></c-title>
    <div class="head">
      <div class="tab">
        <span @click="choose(1)" :class="{ active: choose_index == 1 }">综合</span>
        <span @click="choose(2)"
          :class="{ active: choose_index == 2, up: sort.up == 1 && choose_index == 2, down: sort.down == 1 && choose_index == 2 }"
          class="grid-content">销量</span>
        <span @click="choose(3)"
          :class="{ active: choose_index == 3, up: sort.up == 1 && choose_index == 3, down: sort.down == 1 && choose_index == 3 }"
          class="grid-content">佣金率</span>
        <span @click="choose(4)"
          :class="{ active: choose_index == 4, up: sort.up == 1 && choose_index == 4, down: sort.down == 1 && choose_index == 4 }"
          class="grid-content">粉丝数</span>
      </div>
    </div>
    <div class="list">
      <div class="box" v-for="(item, index) in list" :key="index">
        <div class="box-top">
          <div class="box-top-left">
            <div class="detail">
              <div class="flex">
                <img :src="item.author_pic" alt />
                <div>
                  <div class="flex">
                    <span class="name">{{ item.author_name }}</span>
                    <div class="on-line" v-if="item.is_live">
                      <span class="line line-1"></span>
                      <span class="line line-2"></span>
                      <span class="line line-3"></span>
                      <span>直播中</span>
                    </div>
                  </div>
                  <div class="fans">粉丝 | {{item.fans_num}}</div>
                </div>
              </div>
              <div style="display: flex; flex-wrap: wrap;">
                <span class="category" :class="{ 'ml-128': category_i == 0 }"
                  v-for="(category_item, category_i) in item.product_category " :key="category_i">{{ category_item
                  }}</span>
              </div>
            </div>
          </div>
          <div class="box-top-right">
            <div class="btn main-bg" @click="link(item)">进入直播间</div>
            <div class="btn mt-16 main-color" @click="copy_handle(item.author_openid,item)">复制抖口令</div>
          </div>
        </div>
        <div class="box-bottom">
          <div v-for="(item_good, item_good_i) in item.products && item.products.slice(0, 3)" :key="i"
            style="display: flex; flex-direction: column; justify-content: space-between;"
            :class="{ 'm15': item_good_i == 1 }">
            <img :src="item_good.cover" alt />
            <p class="goods-title">{{ item_good.title }}</p>
            <div class="text-left mt-15">
              <span class="current-price">{{ $i18n.t('money') }}{{ item_good.coupon_price }}</span>
              <span class="original-price">{{ $i18n.t('money') }}{{ item_good.price }}</span>
            </div>
            <div class="text-left mt8" style="display: flex;" v-if="item_good.share_reward ">
              <span class="estimate">预估返</span>
              <span class="price">{{ item_good.share_reward }}</span>
            </div>
          </div>
        </div>
        <div class="more-goods" @click="link(item)">
          <span>查看全部商品</span>
          <span style="color: #f42121; margin: 0 0.3125rem;">({{ item.product_count }}件)</span>
          <van-icon name="arrow" style="transform: scale(0.8);" />
        </div>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="detail">
            <div class="flex">
              <img :src="details.author_pic" style="width: 1.5rem; height: 1.5rem; border-radius: 3.125rem;"
                alt />
              <div class="flex">
                <span class="name" style="margin: 0 0.25rem;">{{details.author_name}}</span>
                <div class="on-line" style="height: 1.1rem;"  v-if="details.is_live">
                  <span class="line line-1"></span>
                  <span class="line line-2"></span>
                  <span class="line line-3"></span>
                  <span>直播中</span>
                </div>
              </div>
            </div>
          </div>
          <div class="close" @click="show = false">
            <van-icon name="cross" />
          </div>
          <p class="link_dy">{{ dy_password }}</p>
          <div style="position: relative; bottom: 5%; left: 0; right: 0;">
            <div class="copy-btn" v-clipboard:copy="dy_password" v-clipboard:success="onCopy"
              v-clipboard:error="onError">
              前往直播间抢购
            </div>
            <p style="color: #999; margin-top: 0.5rem; font-size: 0.625rem;">复制口令打开抖音APP进入直播间</p>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      choose_index: 1,
      details:{},

      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      show: false,
      dy_password: "",

      sort: {
        up: 0,
        down: 0
      },
      sort_by: 1, //1-综合；2-销量；3-佣金率；4-粉丝数。不填默认为1
      sort_type: 0,//0-降序 1-升序
    };
  },
  activated() {
    this.isLoadMore = true;
    this.getData({ page: 1, sort_by: this.sort_by, sort_type: this.sort_type });
  },
  methods: {
    onCopy(e) {
      Toast({
        message: "口令已复制，打开抖音app下单！",
        position: "bottom",
        duration: 1000
      });
      this.show = false;
    },
    onError(e) {
      Toast({
        message: "复制失败",
        position: "bottom",
        duration: 1000
      });
    },
    link(data) {
      this.$router.push(this.fun.getUrl("TikTokRoom", { data }));
    },
    async copy_handle(openid,item) {
      let { result, msg, data } = await $http.post('plugin.tiktok-cps.api.live.tranfer-link', { openid });
      if (result == 0) {
        return this.$toast(msg);
      }
      this.details = item;
      this.dy_password = data.dy_password;
      this.show = true;
    },
    async getData(json) {
      let { result, msg, data } = await $http.get("plugin.tiktok-cps.api.live.live-list", json);
      if (result == 0) {
        return this.$toast(msg);
      }
      if (json.page == 1) {
        this.list = data.live_infos || [];
      } else if (json.page > 1) {
        this.list = this.list.concat(data.live_infos);
      }
      this.current_page = Number(data.current_page);
      this.last_page = data.last_page;
      this.isLoadMore = true;
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      this.getData({ page, sort_type: this.sort_type, sort_by: this.sort_by });
    },
    choose(index) {
      this.choose_index = index;
      let sort_type = 1;
      if (index !== 1) {
        if (this.sort.up == 0 && this.sort.down == 0) {
          this.sort.up = 1;
        } else if (this.sort.up == 1) {
          this.sort.down = 1;
          this.sort.up = 0;
        } else if (this.sort.down == 1) {
          this.sort.up = 1;
          this.sort.down = 0;
        }
      } else if (this.choose_index == 1) {
        this.sort.up = 0;
        this.sort.down = 0;
      }
      if (this.sort.down == 1) {
        sort_type = 0;
      }
      if(this.sort.up == 1){
        sort_type = 1;
      }
      let sort_by = index;
      this.sort_by = sort_by;
      this.sort_type = sort_type;
        this.getData({ page: 1, sort_type, sort_by });
    }
  }
};
</script>

<style lang='scss' scoped>
.m15 {
  margin: 0 0.4688rem;
}

.copy-btn {
  width: 100%;
  background-color: var(--themeBaseColor);
  height: 2.0313rem;
  line-height: 2.0313rem;
  text-align: center;
  color: #fff;
}

::v-deep .van-cell {
  background: #f6f6f6;
  padding: 0.3125rem 0.3125rem 0.3125rem 0.5rem;
  border-radius: 1.0938rem;
  height: 2rem;
}

::v-deep .van-button--primary {
  background-color: var(--themeBaseColor) !important;
  border: 1px solid var(--themeBaseColor) !important;
  padding: 0.25rem 0.75rem;
}

.broadcast-room {
  img {
    margin: 0;
  }

  .mt8 {
    margin-top: 0.25rem;
  }

  .link_dy {
    margin-top: 1.0625rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
    color: #999;
    font-size: 0.75rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .close {
    position: absolute;
    right: 5%;
    top: 5%;
  }

  .block {
    position: relative;
    width: 17.5rem;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 1.25rem 0.625rem;
  }

  .category {
    padding: 0.125rem 0.5rem;
    border-radius: 0.4688rem;
    color: #ff6238;
    border: 1px solid #ff6238;
    margin: 0.125rem;
  }

  .fans {
    color: #999;
    font-size: 0.75rem;
  }

  .main-bg {
    color: #fff !important;
    background-color: var(--themeBaseColor) !important;
    border: 1px solid var(--themeBaseColor) !important;
  }

  .detail {
    text-align: left;
  }

  .box {
    margin-top: 0.75rem;
    background: #fff;
    padding: 0.75rem;
  }

  .name {
    font-size: 0.8125rem;
  }

  .on-line {
    position: relative;
    margin-left: 0.1875rem;
    background: #333;
    color: #fff;
    border-radius: 0.125rem;
    padding: 0.125rem 0.25rem;
    font-size: 0.6875rem;
    height: 1.1563rem;
    flex-shrink: 0;
    overflow: hidden;
  }

  @keyframes animate_2 {
    0% {
      top: 60%;
    }

    50% {
      top: 0%;
    }

    100% {
      top: 60%;
    }
  }

  .line-1 {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation: animate_2 1.4s infinite;
    }
  }

  .line-2 {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation: animate_2 1.25s infinite;
    }
  }

  .line-3 {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation: animate_2 1.1s infinite;
    }
  }

  .line {
    position: relative;
    display: inline-block;
    width: 0.0938rem;
    height: 0.625rem;
    border-radius: 0.125rem;
    margin-right: 0.25rem;
  }

  .list {
    padding-bottom: 2rem;
  }

  .more-goods {
    margin-top: 1.3438rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box-top-left {
    display: flex;
  }

  .price {
    font-size: 0.625rem;
    background: linear-gradient(90deg, #fedeaf 0%, #ecbc81 100%);
    padding: 0.0938rem 0.25rem;
    border-radius: 0 0.125rem 0.125rem 0;
    flex-shrink: 0;
  }

  .estimate {
    font-size: 0.625rem;
    color: #fff;
    background: #333;
    border-top-left-radius: 0.125rem;
    border-bottom-left-radius: 0.125rem;
    flex-shrink: 0;
    padding: 0.0938rem 0.25rem;
  }

  .ml-128 {
    margin-left: 3rem;
  }

  .text-left {
    text-align: left;
  }

  .mt-15 {
    margin-top: 0.4688rem;
  }

  .current-price {
    font-size: 0.75rem;
    color: #ff6238;
    margin-right: 0.9375rem;
  }

  .original-price {
    font-size: 0.75rem;
    color: #999;
    text-decoration: line-through;
  }

  .box-bottom {
    margin-top: 1.125rem;
    display: flex;
    justify-content: space-between;

    img {
      width: 7rem;
      height: 6.25rem;
      border-radius: 0.5rem;
    }
  }

  .goods-title {
    text-align: left;
  }

  .flex {
    display: flex;
  }

  .box-top {
    display: flex;
    justify-content: space-between;

    img {
      border-radius: 100px;
      width: 2.75rem;
      height: 2.75rem;
      margin-right: 0.5rem;
    }

    .box-top-right {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      margin-left: 0.3125rem;
    }

    .btn {
      color: #f42121;
      border: 1px solid var(--themeBaseColor) !important;
      border-radius: 0.25rem;
      padding: 0.375rem 0.75rem;
    }
  }

  .main-color {
    color: var(--themeBaseColor) !important;
  }

  .mt-16 {
    margin-top: 0.5rem;
  }

  .head {
    background: #fff;
    padding: 0.75rem 0.75rem 0;
  }

  .active {
    color: #ef5452;
  }

  .tab {
    display: flex;
    justify-content: space-evenly;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .grid-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(../../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }
}
</style>